<template>
    <div>
        <el-dialog
            :title="isAdd ? '添加商品管理' : '编辑商品管理'"
            :visible.sync="isShow"
            center
            :show-close="false"
        >
            <template>
                <el-tabs v-model="activeName">
                    <el-tab-pane
                        :label="isAdd ? '添加商品' : '编辑商品'"
                        name="first"
                    >
                        <el-form
                            :model="goodsform"
                            :rules="rules"
                            label-position="right"
                            label-width="100px"
                            ref="goodsform"
                        >
                            <el-form-item label="一级分类" prop="first_cateid">
                                <el-select
                                    v-model="goodsform.first_cateid"
                                    placeholder="请选择"
                                    @change="changeCateid"
                                >
                                    <el-option
                                        v-for="item in catelist"
                                        :key="item.id"
                                        :label="item.catename"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="二级分类" prop="second_cateid">
                                <el-select
                                    v-model="goodsform.second_cateid"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        label="请选择"
                                        value="0"
                                        disabled
                                    ></el-option>
                                    <!-- 先循环catelist 再子集children循环 如果子集 pid相等 一级分类编号 -->
                                    <template v-for="item in catelist">
                                        <el-option
                                            v-show="
                                                item1.pid ==
                                                    goodsform.first_cateid
                                            "
                                            v-for="item1 in item.children"
                                            :key="item1.id"
                                            :label="item1.catename"
                                            :value="item1.id"
                                        ></el-option>
                                    </template>
                                    <!-- <template v-for="item in catelist">
                                        <el-option-group :key="item.id">
                                            <template
                                                v-for="item1 in item.children"
                                            >
                                                <el-option
                                                    v-if="
                                                        item1.pid ==
                                                            goodsform.first_cateid
                                                    "
                                                    :key="item1.id"
                                                    :label="item1.catename"
                                                    :value="item1.id"
                                                ></el-option>
                                            </template>
                                        </el-option-group>
                                    </template> -->
                                </el-select>
                            </el-form-item>

                            <el-form-item label="商品名称" prop="goodsname">
                                <el-input
                                    v-model="goodsform.goodsname"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="商品价格" prop="price">
                                <el-input v-model="goodsform.price"></el-input>
                            </el-form-item>
                            <el-form-item label="市场价格" prop="market_price">
                                <el-input
                                    v-model="goodsform.market_price"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="图片">
                                <el-upload
                                    action="#"
                                    list-type="picture-card"
                                    :on-change="handleChange"
                                    :on-remove="handleRemove"
                                    :auto-upload="false"
                                    :file-list="fileList"
                                    :limit="1"
                                    :on-exceed="handleExceed"
                                >
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="商品规格" prop="specsid">
                                <el-select
                                    v-model="goodsform.specsid"
                                    placeholder="请选择"
                                    @change="changeSpecsid"
                                >
                                    <el-option
                                        v-for="item in specslist"
                                        :key="item.id"
                                        :label="item.specsname"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="规格属性" prop="specsattr">
                                <el-select
                                    v-model="goodsform.specsattr"
                                    placeholder="请选择"
                                    multiple
                                >
                                    <el-option
                                        label="请选择"
                                        value="0"
                                        disabled
                                    ></el-option>
                                    <!-- 先循环specslist 再子集attrs循环 如果specslist的id 等于 当前信息的id -->
                                    <template v-for="item in specslist">
                                        <el-option
                                            v-show="
                                                item.id == goodsform.specsid
                                            "
                                            v-for="item1 in item.attrs"
                                            :key="item1"
                                            :label="item1"
                                            :value="item1"
                                        ></el-option>
                                    </template>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否热卖">
                                <el-radio-group v-model="goodsform.ishot">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="是否新品">
                                <el-radio-group v-model="goodsform.isnew">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="状态">
                                <el-switch
                                    v-model="goodsform.status"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="2"
                                ></el-switch>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="详细描述" name="second">
                        <div id="editor"></div>
                    </el-tab-pane>
                </el-tabs>
                <div slot="footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submit" v-if="isAdd"
                        >添 加</el-button
                    >
                    <el-button type="primary" @click="submit" v-else
                        >修 改</el-button
                    >
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import Vuex from "vuex";
import E from "wangeditor";
export default {
    data() {
        return {
            //选项卡默认选择的选项
            activeName: "first",
            //表单的验证规则
            rules: {
                first_cateid: {
                    required: true,
                    message: "请选择一级分类",
                    trigger: "blur",
                },
                second_cateid: {
                    required: true,
                    message: "请选择二级分类",
                    trigger: "blur",
                },
                goodsname: [
                    {
                        required: true,
                        message: "请输入商品管理名称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 6,
                        message: "长度在 2 到 6 个字符",
                        trigger: "blur",
                    },
                ],
                price: {
                    required: true,
                    message: "请输入商品价格",
                    trigger: "blur",
                },
                market_price: {
                    required: true,
                    message: "请选择市场价格",
                    trigger: "blur",
                },
                specsid: {
                    required: true,
                    message: "请选择商品规格",
                    trigger: "blur",
                },
                specsattr: {
                    required: true,
                    message: "请选择规格属性",
                    trigger: "blur",
                },
            },
            //富文本编译器
            editor: "",
        };
    },
    props: ["isDialog", "isAdd"],
    methods: {
        //图片上传超出限制
        handleExceed() {
            this.$message.warning("最多上传一张图片");
        },
        //文件上传切换的时候
        handleChange(file) {
            this.goodsform.img = file.raw;
        },
        //文件删除的事件
        handleRemove() {
            //点击删除，设置图片为空
            this.goodsform.img = "";
            this.$message.success("删除成功");
        },
        //切换cateid,选择框内容清除
        changeCateid() {
            this.goodsform.second_cateid = "";
        },
        //切换specsid,选择框内容清除
        changeSpecsid() {
            this.goodsform.specsattr = "";
        },
        ...Vuex.mapMutations({
            //设置一条数据 也就是设置弹框的数据
            setgoodsinfo: "goods/setgoodsinfo",
            setfileList: "cate/setfileList",
        }),
        ...Vuex.mapActions({
            getlist: "goods/goodslist_a", //获取商品管理列表 接口
            goodsadd: "goods/goodsadd_a", //获取商品管理添加 接口
            goodsedit: "goods/goodsedit_a", //获取商品管理添加 接口
            goodscount: "goods/goodscount_a", //获取商品管理总数 接口
            catelist_a: "cate/catelist_a", //获取商品分类列表 接口
            specslist_a: "specs/specslist_a", //获取商品规格列表 接口
        }),
        //点击取消 弹框消失
        cancel() {
            this.$emit("cancel", false);
            this.reset();
        },
        //reset 重置弹框表单的数据
        reset() {
            this.setgoodsinfo({
                description: "", //商品描述
                first_cateid: "", //一级分类编号
                // firstcatename: "",//一级分类名称
                goodsname: "", //商品名称
                // id: 0,//商品编号
                img: "", //商品图片
                ishot: 1, //是否热卖推荐 1-是 2-否
                isnew: 1, //是否新品     1-是 2-否
                market_price: "", //市场价格
                // number: 1, //商品数量
                price: "", //商品价格
                second_cateid: "", //二级分类编号
                // secondcatename:"",//二级分类名称
                specsattr: "", //商品规格属性
                specsid: "", //商品规格编号
                status: 1, //状态1正常2禁用
            });
            //重置也要把fileList也就是upload关联的文件内容变为空
            this.setfileList([]);
        },
        //点击添加或修改按钮提交
        submit() {
            //通过验证器判断是否符合rules规则
            this.$refs.goodsform.validate((vaild) => {
                if (vaild) {
                    //提交时，把editor的内容给到表单
                    this.goodsform.description = this.editor.txt.html();
                    //formdata格式传递
                    let fd = new FormData();
                    for (var key in this.goodsform) {
                        fd.append(key, this.goodsform[key]);
                    }
                    //vuex方法,需要去watch监听事件的变化
                    if (this.isAdd) {
                        this.goodsadd(fd);
                    } else {
                        this.goodsedit(fd);
                    }
                } else {
                    this.$message.error("输入有误");
                    this.reset();
                    return false;
                }
            });
        },
    },
    computed: {
        //获取商品管理列表
        ...Vuex.mapGetters({
            goodsform: "goods/getgoodsinfo",
            goodsTitle: "goods/getgoodsTitle",
            page: "goods/getPage",
            catelist: "cate/getcatelist",
            specslist: "specs/getspecslist",
            fileList: "cate/getfileList", //文件上传的历史记录
            geteditot: "goods/geteditor",
        }),
        //接收传递来的prop属性，
        isShow: {
            get() {
                return this.isDialog;
            },
            set() {
                this.$emit("cancel", false);
            },
        },
    },
    watch: {
        //监听输出的内容是否变化，list组件也会受影响
        goodsTitle(val) {
            if (val.code == 200) {
                this.$message.success(val.msg);
                this.cancel();
            } else {
                this.$message.error(val.msg);
                this.reset();
            }
            //调用 商品管理总数 接口
            this.goodscount();
            // 调用 获取列表 接口
            this.getlist(this.page);
        },
        //当点击添加或者编辑时，监听到数据变化,需要让弹框先显示 再赋值到富文本
        geteditot(val) {
            this.$nextTick(() => {
                //如果弹框显示，没有editor 那么就实例一个editor挂载到edtior盒模型上，并初始化
                if (!this.editor) {
                    this.editor = new E("#editor");
                    this.editor.create();
                }
                this.editor.txt.html(val);
            });
        },
    },
    mounted() {
        this.catelist_a();
        this.specslist_a();
    },
    // updated() {
    //     //如果弹框显示，没有editor 那么就实例一个editor挂载到edtior盒模型上，并初始化，有bug，弹框打开。每次输入值就会重新刷新
    //     if (this.isShow) {
    //         if(!this.editor){
    //             this.editor = new E("#editor");
    //             this.editor.create();
    //         }
    //     }
    // },
};
</script>

<style scoped>
.formBtns {
    margin-right: 100px;
    text-align: center;
}
</style>
